<template>
	<view class="container">
			<nav-bar title="待办(5)" :color="navBarColor" :bg="navBarBg" />
			<view>
				<view class="item" v-for="(item , index) in 5" :key="index">
					<view class="top">
						<view class="header flex-between">
							<view class="flex-align">
								<view class="name">衡阳奥星</view>
							</view>
							<view class="flex-align">
								<view class="new"></view>
								<view class="timer">
									周四 16:23
								</view>
							</view>
						</view>
						<view class="con">
							<view class="notice-title">体育强国战略下，智慧体育成为“风向标</view>
							<view class="detail">
								北京推行体育培训准入制 建立专用账户防卷款跑路 2022-04-05 1
							</view>
						</view>
					</view>
					<view class="bottom flex-between" @click="openDetail(item)">
						<view class="info">查看详情</view>
						<u-icon name="arrow-right" color="#e4e4e4" size="18"></u-icon>
					</view>
				</view>
			</view>
		<tabber :active="1"></tabber>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';
	export default {
		mixins: [navbar({
			navBarColor: '#000'
		})],

		data() {
			return {
				venuelist: [],


			}
		},
		methods: {
			onload() {
				uni.navigateTo({
					url: ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		padding: 30rpx 30rpx;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b34fc1d39971130db4e292744aaaf83cf77b9f0b.png");
		background-size: 100% 100vh;
		background-position: 0% 0%;
		padding-bottom: 180rpx;

			.item {
				background-color: #ffffff;
				border-radius: 15rpx;
				margin-bottom: 30rpx;

				&:last-of-type {
					margin-bottom: 0;
				}

				.top {
					padding: 20rpx 30rpx;
					padding-bottom: 25rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #f7f7f7;

					.header {
						margin-bottom: 20rpx;

						.name {
							font-size: 28rpx;
						}

						.timer {
							font-size: 24rpx;
							color: #b2b2b2;
						}

						.new {
							width: 24rpx;
							height: 24rpx;
							border-radius: 50%;
							margin-right: 20rpx;
							background-color: #f63043;
						}
					}

					.con {
						.notice-title {
							font-weight: 700;
							font-size: 28rpx;
							margin-bottom: 20rpx;
						}

						.detail {
							font-size: 26rpx;
							color: #8b8b8b;
						}
					}
				}

				.bottom {
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}
			}
	}
</style>
